import React, { useEffect, useState } from "react";
import { withRouter, NavLink } from "react-router-dom";
import "./RouterLink.less";
import "antd/dist/antd.css";

function Nav(props) {
  const { router } = props;

  const handleClick = (e) => {
    e.stopPropagation(); 
    let parent = e.target.parentNode.parentNode;
    if(parent.className === 'parent'){
      let children = parent.querySelector('div.children');
      if(children.classList.contains('active')){
        children.classList.remove('active');
      }else{
        children.classList.add('active');
        
      }
    }
    
  };
  return (
    <div className="NavLink" onClick={handleClick}>
      {
        router&&router.map((item,index)=>{
          if(item.isShow&&!item.children){
            return (
              <div className="parent" key={index}>
                <h3>
                  <NavLink to={item.path}>{item.title}</NavLink>
                  <span></span>
                </h3>
              </div>
            )
          }
          if(item.isShow && item.children){
            return (
              <div className="parent" key={index} onClick={handleClick}>
                <h3>
                  <NavLink to={item.path}>{item.title}</NavLink>
                  <span></span>
                </h3>
                <div className="children active">
                  {
                    item.children&&item.children.map((ite,k)=>{
                      if(ite.isShow){
                        return (
                          <p key={k}>
                            <NavLink activeClassName="active" to={ite.path}>{ite.title}</NavLink>
                          </p>
                        )
                      }
                    })
                  }
                </div>
              </div>
            )
          }
        })
      }
    </div>
  );
}
export default withRouter(Nav);
